<template>
  <div class="content-in">
    <!-- banner -->
    <div class="swiper-banner">
      <div class="swiper-wrapper">
        <div v-for="(item, index) in imgs" :key="index" class="swiper-slide">
          <img :src="item.url" alt="banner" />
          <div class="content1">
            <p class="ft-24">{{ item.title }}</p>
            <p class="ft-36 ft-bold">{{ item.subtitle }}</p>
            <p class="ft-24">{{ item.desc }}</p>
            <div class="btn">
              <span @click="toProduct"> {{ $t('common.learnMore') }} > </span>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-banner-page">
        <div
          v-for="(item, index) in imgs"
          :key="index"
          class="swiper-page-in"
          :class="{
            active: index === activeBannerIndex,
          }"
        ></div>
      </div>
    </div>
    <!-- 商品 -->
    <div
      v-for="(item, index) in products"
      :key="index"
      :class="`goods bg${index + 1} ${index === 4 && 'white'}`"
    >
      <p class="ft-bold">{{ item[`classificationName${capitalizeLang}`] }}</p>
      <h1 class="blue">{{ item[`title${capitalizeLang}`] }}</h1>
      <p class="ft-24">{{ item[`subtitle${capitalizeLang}`] }}</p>
      <div class="btn">
        <span :class="`${index === 4 && 'white'}`" @click="toPage(item)">
          {{ $t('common.learnMore') }} >
        </span>
        <span :class="`${index === 4 && 'white'}`" @click="toContactUs(item)">
          {{ $t('common.purchase') }} >
        </span>
      </div>
      <img :src="item.coverImage" alt="goods" class="goods01" />
    </div>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div v-for="(item, index) in navbars" :key="index" class="swiper-slide navbar">
          <!-- 这里是你的滑动内容 -->
          <h1>{{ item[`title${capitalizeLang}`] }}</h1>
          <span>{{ item[`subtitle${capitalizeLang}`] }}</span>
          <img :src="item.bgImg" alt="navbar" />
        </div>
      </div>
      <div class="swiper-page">
        <div
          v-for="(item, index) in navbars"
          :key="index"
          class="swiper-page-in"
          :class="{
            active: index === activeIndex,
          }"
        ></div>
      </div>
    </div>
    <!-- team -->
    <div class="team">
      <h1>{{ $t('index.team') }}</h1>
      <p class="ft-24 pd-row-60">
        {{ $t('index.teamTips') }}
      </p>
      <div class="team-box">
        <div v-for="(item, index) in teams" :key="index" class="t-b-row">
          <img :src="item.bgImg" alt="" />
          <p class="ft-18">{{ item[`title${capitalizeLang}`] }}</p>
        </div>
        <!-- <div key="8" class="t-b-row no-bg align-center"></div> -->
      </div>
    </div>
    <!-- partner -->
    <div class="partner">
      <h1>{{ $t('index.partners') }}</h1>
      <img src="@/assets/images/index/partner.png" alt="" />
    </div>
    <!-- news -->
    <div v-if="!!news.length" class="news">
      <h1>{{ $t('index.news') }}</h1>
      <div class="news-row">
        <img :src="news[0].coverImage" alt="" />
        <p class="ft-30 ft-bold pd-row-24 mg-b-15">
          {{ news[0][`title${capitalizeLang}`] }}
        </p>
        <p class="ft-24 mg-b-15 pd-row-24">
          {{ news[0][`subtitle${capitalizeLang}`] }}
        </p>
        <span class="" @click="handleTabChange(news[0])">{{ $t('common.learnMore') }} ></span>
      </div>
    </div>
    <!-- video -->
    <div class="video">
      <h1 class="blue ft-48">{{ $t('common.soten') }}</h1>
      <h1 class="ft-36 white">{{ $t('common.video') }}</h1>
      <div class="flex">
        <div class="play" @click="onPlay">
          <i class="el-icon-caret-right"></i>
        </div>
      </div>
      <div v-if="videoVisible" class="video-popup">
        <video
          ref="vlogs"
          loop
          controls
          :src="
            capitalizeLang === 'Zh'
              ? 'https://bepai-sotenowe.oss.bepai.net/static/video/zh/gssl_zh.mp4'
              : 'https://bepai-sotenowe.oss.bepai.net/static/video/en/gssl_en.mp4'
          "
        ></video>
        <div class="close">
          <i class="el-icon-circle-close" @click="hide()"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'

export default {
  name: 'PageApp',
  props: {
    news: {
      type: Array,
      default: () => [],
    },
    products: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      swiper: null,
      banner: null,
      navbars: [
        {
          titleZh: '研发能力',
          titleEn: 'R&D CAPABILITY',
          subtitleZh:
            '团队拥有多个工业级移动物联网硬件平台，丰富的GSM/WCDMA/TD-SCDMD/HSPA/4G LTE/5G NR通讯方案资源，可以为客户提供从工业设计、结构设计、硬件开发、系统开发、产品测试、应用集成一站式解决方案。团队在加固工业结构设计中，对电子设备应对跌落、冲击、防水、防尘、防爆、严寒、高温、电磁干扰等各种严酷环境可靠性方面有着丰富的经验。配备专业的软件系统研发团队、可以完成相关产品内核、功能模块的系统级SDK、ROM定制，可为合作伙伴提供专业的MDM移动设备集成管理系统。',
          subtitleEn:
            'The team has a number of industrial-grade mobile IoT hardware platforms, rich GSM/WCDMA/TD-SCDMD/HSPA/4G LTE/5G NR communication solution resources, and can provide customers with one-stop solutions from industrial design, structural design, hardware development, system development, product testing, and application integration. The team has rich experience in the reliability of electronic equipment in various harsh environments such as drop, impact, waterproof, dustproof, explosion-proof, severe cold, high temperature, and electromagnetic interference in the design of reinforced industrial structures. Equipped with a professional software system R&D team, it can complete the system-level SDK and ROM customization of related product kernels and functional modules, and can provide partners with a professional MDM mobile device integrated management system.',
          bgImg: require('@/assets/images/index/navbar01.png'),
        },
        {
          titleZh: '制造能力',
          titleEn: 'MANUFACTURING CAPACITY',
          subtitleZh:
            '我们具有完整的SMT、模具、外壳、摄像头、触摸屏、显示屏、电池等主要部件的生产装配能力，产品总装车间配备单台柔性定制组装工程师和高速批量总成线双模式，可以满足合作伙伴从EVT/DVT/PVT/到100K批量化生产的不同产能需求。',
          subtitleEn:
            'We have complete production and assembly capacity of SMT, molds, shells, cameras, touch screens, displays, batteries and other major components, and the product assembly workshop is equipped with a single flexible custom assembly engineer and a high-speed batch assembly line dual mode, which can meet the different capacity needs of partners from EVT/DVT/PVT/to 100K mass production.',
          bgImg: require('@/assets/images/index/navbar02.png'),
        },
        {
          titleZh: '管理能力',
          titleEn: 'PROJECT MANAGEMENT',
          subtitleZh:
            '通过十几年的积累和发展，我们形成了完善、稳定、成熟的行业供应链管理体系，涵盖全品类电子料、CPU、GPU、存储芯片、内存模组、PCB、显示屏、摄像头、传感器及各种工业专项模块， 我们的产品通过3C、FCC、CE、RoHs、MA、ATEX等国内、国际产品认证和行业认证，拥有知识产权专利超过50项，通过落实ISO系列标准体系的建设，我们形成了涵盖供应链管理、研发管理、生产管理、品质管理、销售管理、运营管理、服务管理的全方位管理体系。',
          subtitleEn:
            'Through more than ten years of accumulation and development, we have formed a perfect, stable and mature industry supply chain management system, covering all categories of electronic materials, CPU, GPU, memory chips, memory modules, PCBs, displays, cameras, sensors and various industrial special modules. Our products have passed 3C, FCC, CE, RoHs, MA, ATEX and other domestic and international product certifications and industry certifications, and have more than 50 intellectual property patents. We have formed a comprehensive management system covering supply chain management, R&D management, production management, quality management, sales management, operation management and service management.',
          bgImg: require('@/assets/images/index/navbar03.png'),
        },
        {
          titleZh: '服务能力',
          titleEn: 'PROFESSIONAL SERVICES',
          subtitleZh:
            '专业的营销运营及设计团队，可为合作伙伴在产品包装设计、网站网店建站设计、产品短视频拍摄、营销策划等一些列衍生服务上提供专家级服务支持，协助成长型合作伙伴完成专业的快速ODM定制生产，我们提供一对一的产品和项目专家级售后服务，提供关键任务的全程指导，可以提供完整的具有自主知识产权的相关资料，并在相关认证流程中拥有丰富的经验及行业资源，可以配合合作伙伴快速完成各种所需的产品认证和行业认证。',
          subtitleEn:
            'The professional marketing operation and design team can provide expert service support for partners in a series of derivative services such as product packaging design, website and online store design, product short video shooting, marketing planning, etc., and assist growing partners to complete professional rapid ODM customized production, we provide one-to-one product and project expert after-sales service, provide full guidance for key tasks, can provide complete relevant information with independent intellectual property rights, and have rich experience and industry resources in the relevant certification process, we can cooperate with partners to quickly complete various required product certifications and industry certifications.',
          bgImg: require('@/assets/images/index/navbar04.png'),
        },
        {
          titleZh: '创新能力',
          titleEn: 'INNOVATION CAPABILITY',
          subtitleZh:
            '我们的团队协助大量成长型伙伴一起完成了相关产品在智慧物流、智能医疗、智能城市、精准农业、生物信息、工业制造、户外运动、测绘导航等领域数千个实际项目中的应用，积累了海量的行业应用经验，可以在项目全程提供专业的行业应用技术咨询指导，并协助项目快速展开。',
          subtitleEn:
            'Our team has assisted a large number of growth partners to complete the application of related products in thousands of practical projects in the fields of smart logistics, smart healthcare, smart city, precision agriculture, bioinformatics, industrial manufacturing, outdoor sports, surveying, mapping and navigation, etc., and has accumulated a large amount of industry application experience.',
          bgImg: require('@/assets/images/index/navbar05.png'),
        },
      ],
      teams: [
        {
          titleZh: '工业设计',
          titleEn: 'lndustry Design',
          bgImg: require('@/assets/images/index/team01.png'),
        },
        {
          titleZh: '结构设计',
          titleEn: 'Mechanical Design',
          bgImg: require('@/assets/images/index/team02.png'),
        },
        {
          titleZh: '硬件开发',
          titleEn: 'Hardware',
          bgImg: require('@/assets/images/index/team03.png'),
        },
        {
          titleZh: '软件开发',
          titleEn: 'Software',
          bgImg: require('@/assets/images/index/team04.png'),
        },
        {
          titleZh: '项目管理',
          titleEn: 'Project Management',
          bgImg: require('@/assets/images/index/team05.png'),
        },
        {
          titleZh: '供应链管理',
          titleEn: 'Sourcing',
          bgImg: require('@/assets/images/index/team06.png'),
        },
        {
          titleZh: '质量控制',
          titleEn: 'Quality Assurance',
          bgImg: require('@/assets/images/index/team07.png'),
        },
        {
          titleZh: '服务体系',
          titleEn: 'Professional Services',
          bgImg: require('@/assets/images/index/team08.png'),
        },
        {
          titleZh: '运营管理',
          titleEn: 'Operations Management',
          bgImg: require('@/assets/images/index/team09.png'),
        },
      ],
      activeIndex: 0,
      activeBannerIndex: 0,
      videoVisible: false,
    }
  },
  computed: {
    ...mapState(['isZh']),
    ...mapGetters(['capitalizeLang']),
    imgs() {
      return [
        {
          url: require('@/assets/images/index/banner01.jpg'),
          title: this.$t('index.banner1'),
          subtitle: this.$t('index.subtitle'),
          desc: this.$t('index.desc'),
        },
        {
          url: require('@/assets/images/index/banner02.jpg'),
          title: this.$t('index.banner2'),
          subtitle: this.$t('index.subtitle'),
          desc: this.$t('index.desc'),
        },
        {
          url: require('@/assets/images/index/banner03.jpg'),
          title: this.$t('index.banner3'),
          subtitle: this.$t('index.subtitle'),
          desc: this.$t('index.desc'),
        },
        {
          url: require('@/assets/images/index/banner04.jpg'),
          title: this.$t('index.banner4'),
          subtitle: this.$t('index.subtitle'),
          desc: this.$t('index.desc'),
        },
        {
          url: require('@/assets/images/index/banner05.jpg'),
          title: this.$t('index.banner5'),
          subtitle: this.$t('index.subtitle'),
          desc: this.$t('index.desc'),
        },
        {
          url: require('@/assets/images/index/banner06.jpg'),
          title: this.$t('index.banner6'),
          subtitle: this.$t('index.subtitle'),
          desc: this.$t('index.desc'),
        },
      ]
    },
  },
  mounted() {
    const self = this
    // 初始化 Swiper 实例
    this.swiper = new Swiper('.swiper', {
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      on: {
        slideChange(e) {
          self.activeIndex = e.activeIndex
        },
      },
    })
    // 初始化 Swiper 实例
    this.banner = new Swiper('.swiper-banner', {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on: {
        slideChange(e) {
          self.activeBannerIndex = e.activeIndex
        },
      },
    })
  },
  beforeDestroy() {
    // 销毁 Swiper 实例
    if (this.swiper) {
      this.swiper.destroy()
      this.swiper = null
    }
  },
  methods: {
    toProduct() {
      this.$router.push({
        path: '/product',
      })
    },
    async toPage(item) {
      if (!item.url) {
        return
      }

      this.$router.push({
        path: '/solution',
        query: {
          id: item.url,
          type: item.classificationType,
        },
      })
    },
    async toContactUs(item) {
      if (this.isZh) {
        window.open('https://work.weixin.qq.com/ca/cawcdec2e016c3c426')
      } else {
        window.open('https://wa.me/8617782030739')
      }
    },
    handleTabChange(item) {
      if (!item.url) {
        return
      }
      this.$router.push({
        path: '/solution',
        query: {
          id: item.url,
          type: item.classificationType,
          createTime: item.createTime,
        },
      })
    },
    hide() {
      this.videoVisible = false
      document.body.style.overflow = 'auto'
    },
    async onPlay() {
      this.videoVisible = true
      await this.$nextTick()
      const vlogs = this.$refs.vlogs
      vlogs && vlogs.play()
      document.body.style.overflow = 'hidden'
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.content-in {
  .swiper-banner {
    display: flex;
    position: relative;
    height: 940px;

    .el-carousel {
      width: 100%;
      height: 940px;

      :depp(.el-carousel__container) {
        height: 100%;
      }
    }

    img {
      width: 100%;
      height: 100%;
    }

    .content1 {
      position: absolute;
      text-align: center;
      width: 100%;
      top: 88px;
      padding: 0 56px;

      .btn {
        display: flex;
        justify-content: center;
        margin-top: 36px;

        span {
          margin: 0 15px;
          padding: 0 18px;
          height: 42px;
          line-height: 42px;
          background: #0261bc;
          border-radius: 21px;
          display: block;
          font-size: 24px;
          font-weight: 400;
          color: #fff;

          &.white {
            color: #fff;
            border: 1px solid #fff;
          }
        }
      }
    }
  }

  .goods {
    height: 940px;
    background-size: 100% 100%;
    background-position: center;
    padding-top: 80px;
    text-align: center;
    position: relative;
    transition: 0.3s all linear;

    img {
      transition: 0.3s all linear;
    }

    &.bg1 {
      background-image: url(@/assets/images/index/bg01.png);
    }

    &.bg2 {
      background-image: url(@/assets/images/index/bg02.png);
    }

    &.bg3 {
      background-image: url(@/assets/images/index/bg03.png);
    }

    &.bg4 {
      background-image: url(@/assets/images/index/bg04.png);
    }

    &.bg5 {
      background-image: url(@/assets/images/index/bg05.png);
    }

    &.bg6 {
      background-color: #dde0e5;
    }

    .goods01 {
      width: 520px;
      height: 440px;
      margin-top: 90px;
    }

    .goods02 {
      position: absolute;
      width: 594px;
      height: 440px;
      margin-top: 145px;
      right: 0;
    }

    .goods03 {
      width: 484px;
      height: 372px;
      margin-top: 160px;
    }

    .goods04 {
      width: 470px;
      height: 454px;
      margin-top: 110px;
    }

    .goods05 {
      width: 234px;
      height: 500px;
      margin-top: 100px;
    }

    .goods06 {
      width: 568px;
      height: 428px;
      margin-top: 130px;
    }

    &:hover {
      background-size: 110% 110%;

      img {
        transform: scale(1.2);
      }
    }

    .btn {
      display: flex;
      justify-content: center;
      margin-top: 36px;

      span {
        margin: 0 15px;
        padding: 0 18px;
        height: 42px;
        border: 1px solid #393a3a;
        border-radius: 21px;
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: #333;

        &.white {
          color: #fff;
          border: 1px solid #fff;
        }
      }
    }
  }

  .navbar-box {
    width: 750px;
    height: 750px;
    overflow: auto;
    font-size: 0;
    white-space: nowrap;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }

  .navbar {
    width: 750px;
    height: 750px;
    display: inline-block;
    background-size: 100% 100%;
    position: relative;
    padding: 90px 60px 0 50px;
    color: #fff;
    white-space: wrap;
    vertical-align: top;
    line-height: 30px;

    h1 {
      position: relative;
      z-index: 20;
      font-size: 36px;
      line-height: 36px;
      margin-bottom: 8px;
    }

    span {
      font-size: 24px;
      z-index: 20;
      position: relative;
    }

    a {
      position: relative;
      z-index: 20;
      margin-top: 30px;
      padding: 0 18px;
      height: 42px;
      border: 1px solid #fff;
      border-radius: 21px;
      display: inline-block;
      font-size: 24px;
      color: #fff;
    }

    img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .swiper-page,
  .swiper-banner-page {
    background-color: rgba(255, 255, 255, 0.4);
    position: absolute;
    bottom: 20px;
    left: 50px;
    font-size: 0;
    color: #fff;
    z-index: 20;
    width: 620px;
    height: 8px;
    display: flex;

    .swiper-page-in {
      flex: 1;

      &.active {
        background-color: rgba(255, 255, 255, 1);
      }
    }
  }

  .team {
    background-image: url(@/assets/images/index/bg07.png);
    background-size: 100% 100%;
    height: 940px;
    color: #fff;
    text-align: center;
    padding-top: 40px;

    .ft-24 {
      line-height: 28px;
      margin-bottom: 20px;
    }

    .team-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .t-b-row {
      width: 200px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.17);
      padding-top: 40px;
      margin: 15px;

      &.no-bg {
        background-color: rgba(0, 0, 0, 0);
        display: flex;
        align-items: center;
        justify-content: center;

        .ft-24 {
          color: #0261bc;
          line-height: 40px;
          width: 180px;
          height: 42px;
          border: 1px solid #0261bc;
          border-radius: 21px;
        }
      }

      img {
        display: block;
        margin: 0 auto 20px auto;
        width: 80px;
        height: 80px;
      }
    }
  }

  .partner {
    padding: 60px 0 40px 0;
    text-align: center;

    img {
      width: 700px;
      margin: 40px auto 0;
      display: block;
    }
  }

  .news {
    background: #f6f7f9;
    padding: 40px 24px;

    .news-row {
      display: flex;
      flex-direction: column;
      margin-top: 24px;
      padding-bottom: 30px;
      background-color: #fff;
    }

    h1 {
      text-align: center;
    }

    img {
      margin: 0 auto 24px auto;
      width: 702px;
    }

    span {
      margin: 35px 24px 0 0;
      align-self: flex-end;
      width: 200px;
      height: 42px;
      background: #0261bc;
      border: 1px solid #0762cb;
      border-radius: 21px;
      color: #fff;
      text-align: center;
      line-height: 36px;
    }

    .pd-row-24 {
      padding: 0 24px;
    }
  }

  .video {
    background-size: 100% 100%;
    background-image: url(@/assets/images/index/video01.png);
    padding: 200px 0 0 0;
    height: 940px;
    color: #fff;
    position: relative;
    text-align: center;

    .play {
      width: 64px;
      height: 64px;
      padding-top: 7px;
      margin: 60px auto 0 auto;
      cursor: pointer;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      text-align: center;
    }

    .el-icon-caret-right {
      font-size: 48px;
    }

    .flex {
      align-items: center;
    }

    video {
      width: 100%;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .video-popup {
      position: fixed;
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 20;

      .close {
        width: 80px;
        height: 80px;
        font-size: 80px;
        margin: 0;
        color: #fff;
        cursor: pointer;
        position: absolute;
        bottom: 20vh;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  .mg-b-15 {
    margin-bottom: 15px;
  }

  .pd-row-60 {
    padding: 0 60px;
  }

  .blue {
    color: #0261bc;
  }

  .white {
    color: #fff;
  }
}
</style>
